![PyPI Slashes Malware Response Time: 90% of Issues Resolved in Under 24 Hours](https://cdn.sanity.io/images/cgdhsj6q/production/eee3e3fc69826f43dfc3366b71472d981003a5cb-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Slashes Malware Response Time: 90% of Issues Resolved in Under 24 Hours
PyPI has drastically improved its malware response times, resolving 90% of issues in under 24 hours and removing 900 projects since March 2024.
csstype
Advanced tools
Package description
The csstype package provides TypeScript and Flow definitions for CSS properties and values. It is designed to enhance type safety and autocompletion when working with CSS in JavaScript and TypeScript projects. It includes types for CSS properties, pseudo-classes, pseudo-elements, and at-rules.
Type definitions for CSS properties
Csstype allows developers to define CSS properties in an object with type checking. This ensures that the values assigned to CSS properties are valid according to the CSS specification.
{"color": "blue", "fontSize": "12px"}
Type definitions for pseudo-classes and pseudo-elements
Developers can use csstype to define styles for pseudo-classes and pseudo-elements with type safety, ensuring that the pseudo selectors and their associated styles are correctly typed.
{"::before": {"content": "'Before content'"}, ":hover": {"color": "red"}}
Type definitions for at-rules
Csstype includes type definitions for CSS at-rules like @media, allowing developers to write media queries with type-checked properties and values.
{"@media (min-width: 768px)": {"body": {"backgroundColor": "lightblue"}}}
Styled-components is a library for styling React components using tagged template literals. It provides a similar level of type safety and autocompletion when used with TypeScript, but it also includes runtime styling capabilities, which csstype does not.
Emotion is another CSS-in-JS library that allows for styling applications using JavaScript. It offers a similar developer experience to styled-components and can be used with TypeScript for type safety. Emotion also supports dynamic styling, which is not a feature of csstype.
Typestyle is a TypeScript-friendly library that allows for writing type-safe CSS with JavaScript. It is similar to csstype in providing type definitions for CSS properties, but it also includes utilities for generating CSS classes and handling them in JavaScript.
Readme
TypeScript and Flow definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.
TypeScript
import type * as CSS from 'csstype';
const style: CSS.Properties = {
colour: 'white', // Type error on property
textAlign: 'middle', // Type error on value
};
Flow
// @flow strict
import * as CSS from 'csstype';
const style: CSS.Properties<> = {
colour: 'white', // Type error on property
textAlign: 'middle', // Type error on value
};
Further examples below will be in TypeScript!
$ npm install csstype
Properties are categorized in different uses and in several technical variations to provide typings that suits as many as possible.
Default | Hyphen | Fallback | HyphenFallback | |
---|---|---|---|---|
All | Properties | PropertiesHyphen | PropertiesFallback | PropertiesHyphenFallback |
Standard | StandardProperties | StandardPropertiesHyphen | StandardPropertiesFallback | StandardPropertiesHyphenFallback |
Vendor | VendorProperties | VendorPropertiesHyphen | VendorPropertiesFallback | VendorPropertiesHyphenFallback |
Obsolete | ObsoleteProperties | ObsoletePropertiesHyphen | ObsoletePropertiesFallback | ObsoletePropertiesHyphenFallback |
Svg | SvgProperties | SvgPropertiesHyphen | SvgPropertiesFallback | SvgPropertiesHyphenFallback |
Categories:
Standard
, Vendor
, Obsolete
and Svg
Standard
- Current properties and extends subcategories StandardLonghand
and StandardShorthand
(e.g. StandardShorthandProperties
)Vendor
- Vendor prefixed properties and extends subcategories VendorLonghand
and VendorShorthand
(e.g. VendorShorthandProperties
)Obsolete
- Removed or deprecated propertiesSvg
- SVG-specific propertiesVariations:
Hyphen
- CSS (kebab) cased property namesFallback
- Also accepts array of values e.g. string | string[]
At-rule interfaces with descriptors.
TypeScript: These will be found in the AtRule
namespace, e.g. AtRule.Viewport
.
Flow: These will be prefixed with AtRule$
, e.g. AtRule$Viewport
.
Default | Hyphen | Fallback | HyphenFallback | |
---|---|---|---|---|
@counter-style | CounterStyle | CounterStyleHyphen | CounterStyleFallback | CounterStyleHyphenFallback |
@font-face | FontFace | FontFaceHyphen | FontFaceFallback | FontFaceHyphenFallback |
@viewport | Viewport | ViewportHyphen | ViewportFallback | ViewportHyphenFallback |
String literals of pseudo classes and pseudo elements
Pseudos
Extends:
AdvancedPseudos
Function-like pseudos e.g. :not(:first-child)
. The string literal contains the value excluding the parenthesis: :not
. These are separated because they require an argument that results in infinite number of variations.
SimplePseudos
Plain pseudos e.g. :hover
that can only be one variation.
All interfaces has two optional generic argument to define length and time: CSS.Properties<TLength = string | 0, TTime = string>
string | 0
because 0
is the only length where the unit identifier is optional. You can specify this, e.g. string | number
, for platforms and libraries that accepts any numeric value as length with a specific unit.
const style: CSS.Properties<string | number> = {
width: 100,
};
string
. You can specify this, e.g. string | number
, for platforms and libraries that accepts any numeric value as length with a specific unit.
const style: CSS.Properties<string | number, number> = {
transitionDuration: 1000,
};
import type * as CSS from 'csstype';
const style: CSS.Properties = {
width: '10px',
margin: '1em',
};
In some cases, like for CSS-in-JS libraries, an array of values is a way to provide fallback values in CSS. Using CSS.PropertiesFallback
instead of CSS.Properties
will add the possibility to use any property value as an array of values.
import type * as CSS from 'csstype';
const style: CSS.PropertiesFallback = {
display: ['-webkit-flex', 'flex'],
color: 'white',
};
There's even string literals for pseudo selectors and elements.
import type * as CSS from 'csstype';
const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
':hover': {
display: 'flex',
},
};
Hyphen cased (kebab cased) properties are provided in CSS.PropertiesHyphen
and CSS.PropertiesHyphenFallback
. It's not not added by default in CSS.Properties
. To allow both of them, you can simply extend with CSS.PropertiesHyphen
or/and CSS.PropertiesHyphenFallback
.
import type * as CSS from 'csstype';
interface Style extends CSS.Properties, CSS.PropertiesHyphen {}
const style: Style = {
'flex-grow': 1,
'flex-shrink': 0,
'font-weight': 'normal',
backgroundColor: 'white',
};
Adding type checked CSS properties to a HTMLElement
.
import type * as CSS from 'csstype';
const style: CSS.Properties = {
color: 'red',
margin: '1em',
};
let button = document.createElement('button');
Object.assign(button.style, style);
The goal is to have as perfect types as possible and we're trying to do our best. But with CSS Custom Properties, the CSS specification changing frequently and vendors implementing their own specifications with new releases sometimes causes type errors even if it should work. Here's some steps you could take to get it fixed:
If you're using CSS Custom Properties you can step directly to step 3.
First of all, make sure you're doing it right. A type error could also indicate that you're not :wink:
Type 'string' is not assignable to...
errorsHave a look in issues to see if an issue already has been filed. If not, create a new one. To help us out, please refer to any information you have found.
Fix the issue locally with TypeScript (Flow further down):
The recommended way is to use module augmentation. Here's a few examples:
// My css.d.ts file
import type * as CSS from 'csstype';
declare module 'csstype' {
interface Properties {
// Add a missing property
WebkitRocketLauncher?: string;
// Add a CSS Custom Property
'--theme-color'?: 'black' | 'white';
// Allow namespaced CSS Custom Properties
[index: `--theme-${string}`]: any;
// Allow any CSS Custom Properties
[index: `--${string}`]: any;
// ...or allow any other property
[index: string]: any;
}
}
The alternative way is to use type assertion. Here's a few examples:
const style: CSS.Properties = {
// Add a missing property
['WebkitRocketLauncher' as any]: 'launching',
// Add a CSS Custom Property
['--theme-color' as any]: 'black',
};
Fix the issue locally with Flow:
Use type assertion. Here's a few examples:
const style: $Exact<CSS.Properties<*>> = {
// Add a missing property
[('WebkitRocketLauncher': any)]: 'launching',
// Add a CSS Custom Property
[('--theme-color': any)]: 'black',
};
Property.AlignContent
(was AlignContentProperty
before)Property$AlignContent
AtRule.FontFace
(was FontFace
before)AtRule$FontFace
Color
and Box
. Because the generation of data types may suddenly be removed or renamed.(string & {})
for literal string unions and (number & {})
for literal number unions (related issue). Utilize PropertyValue<T>
to unpack types from e.g. (string & {})
to string
.Never modify index.d.ts
and index.js.flow
directly. They are generated automatically and committed so that we can easily follow any change it results in. Therefor it's important that you run $ git config merge.ours.driver true
after you've forked and cloned. That setting prevents merge conflicts when doing rebase.
npm run build
Generates typings and type checks themnpm run watch
Runs build on each savenpm run test
Runs the testsnpm run lazy
Type checks, lints and formats everythingFAQs
Strict TypeScript and Flow types for style based on MDN data
The npm package csstype receives a total of 22,741,293 weekly downloads. As such, csstype popularity was classified as popular.
We found that csstype demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI has drastically improved its malware response times, resolving 90% of issues in under 24 hours and removing 900 projects since March 2024.
Security News
Research
The Socket Research team breaks down an obfuscated script designed to facilitate unauthorized file uploads to multiple external services.
Security News
Node.js has automated its security release process, doubling the number of releases, and is re-evaluating unsupported experimental features with the Next 10 group to enhance security.